<template>
	<view>
		<u-navbar back-text="返回" title="认证身份" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }" back-icon-color="#108EE9"></u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="135" :error-type="['toast']">
				<u-form-item label="姓  名" :required="true" prop="name">
					<u-input v-model="form.name" :clearable="false" />
				</u-form-item>
				<u-form-item label="身份证号" :required="true" prop="idCard">
					<u-input v-model="form.idCard" :clearable="false" />
				</u-form-item>
				<u-form-item label="联系电话" :required="true" prop="phone">
					<u-input v-model="form.phone" :clearable="false" />
				</u-form-item>
				<u-form-item label="身份证照片" :required="true" label-width="165" label-position="top">
					<view class="id-img-box">
						<view class="id-item">
							<view class="add-id">
								<image src="../../static/images/login/addcard.png" mode=""></image>
							</view>
							<view class="title">
								身份证正面
							</view>
						</view>
						<view class="id-item">
							<view class="add-id">
								<image src="../../static/images/login/addcard.png" mode=""></image>
							</view>
							<view class="title">
								身份证背面
							</view>
						</view>
					</view>
				</u-form-item>
			</u-form>

			<view class="now-title-box">
				现场照片
			</view>
			<view class="img-box">
				<block v-if="!imgList.length">
					<view class="fill-img-box">
						<view class="fill-img">
							<image src="../../static/images/login/addcard.png" mode=""></image>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="item-img">
						<image src="../../static/images/login/addcard.png" mode=""></image>
					</view>
				</block>

			</view>
			<view class="foot-btn" @click="submit">
				认证招聘者
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					idCard: '',
					phone: ''
				},
				imgList: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					idCard: [{
						required: true,
						message: '身份证号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$u.route('pages/attestation/success');
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 66rpx 40rpx 100rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		width: 100%;

		.id-img-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.id-item {
				width: 315rpx;
				height: 170rpx;
				background: rgba(245, 245, 245, 1);
				opacity: 1;
				border-radius: 10rpx;

				.add-id {
					width: 43rpx;
					height: 43rpx;
					margin: 36rpx auto 22rpx;
					font-size: 0;

					image {
						width: 43rpx;
						height: 43rpx;
					}
				}

				.title {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: rgba(201, 201, 201, 1);
					opacity: 1;
				}
			}
		}

		.now-title-box {
			margin-top: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 37rpx;
			// color: rgba(153, 153, 153, 1);
			opacity: 1;
		}

		.img-box {
			width: 100%;
			margin-top: 30rpx;
			display: flex;

			.item-img {
				width: 162rpx;
				height: 162rpx;
				font-size: 0;
				border-radius: 10rpx;

				image {
					border-radius: 10rpx;
					width: 162rpx;
					height: 162rpx;
				}
			}

			.fill-img-box {
				width: 162rpx;
				height: 162rpx;
				border: 1rpx solid rgba(223, 223, 223, 1);
				border-radius: 10rpx;

				.fill-img {
					width: 63rpx;
					height: 63rpx;
					margin: 49rpx auto;

					image {
						width: 63rpx;
						height: 63rpx;
					}
				}

			}

		}

		.foot-btn {
			margin-top: 140rpx;
			width: 100%;
			text-align: center;
			height: 90rpx;
			background: linear-gradient(180deg, rgba(211, 176, 105, 1) 0%, rgba(228, 205, 112, 1) 100%);
			border-radius: 8rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: rgba(255, 255, 255, 1);
			opacity: 1;
		}
	}
</style>
